<template>
  <div class="info-wrapper scroll">
    <div class="info-pannel">
      <div class="info-pannel-wrapper shadow">
        <div class="info-pannel-title">微信公众号模板消息通知</div>
        <div class="input-wrapper flex center top">
          <span class="info-pannel-text">企业 下单提醒 模板ID</span>
          <Input
            v-model="config.notice_wechat_template_order_payment_shop"
            placeholder="请填写模板ID"
            style="width: 380px"
          />
        </div>
        <div
          class="input-wrapper flex center top"
          v-for="(item,index) in wechatTemplateArr"
          :key="'template'+index"
        >
          <span class="info-pannel-text">{{translateDict[item.title]}}</span>
          <Input
            v-model="item.value"
            :placeholder="'请填写'+translateDict[item.title]"
            style="width: 380px"
          />
          <Poptip trigger="hover" placement="right">
            <Icon
              v-if="item.title == 'SERVICE_EXPIRE'"
              type="ios-help-circle-outline"
              size="20"
              style="margin-left:5px"
            />
            <div slot="content" style="width:70%">
              <img src="https://file.open.banchengyun.com/2019/02/25/155108564510511.png" style="width:100%">
            </div>
          </Poptip>
        </div>
        <div class="input-wrapper flex">
          <span class="info-pannel-text alpha">企业 下单提醒 模板ID</span>
          <Button :loading="updateLoading1" type="primary" size="default" @click="update(0)">更新</Button>
        </div>
      </div>
    </div>
    <div class="info-pannel" style="margin-top:24px;">
      <div class="info-pannel-wrapper shadow">
        <div class="info-pannel-title">微信小程序模板消息通知</div>
        <div class="input-wrapper flex top">
          <span class="info-pannel-text">模板消息 统一配置</span>
          <Input
            v-model="miniprogramTemplate"
            disabled
            type="textarea"
            :rows="4"
            placeholder="请填写模板配置"
            style="width: 380px;"
          />
        </div>
        <div class="input-wrapper flex center">
          <span class="info-pannel-text alpha">模板消息 统一配置</span>
          <Button :loading="updateLoading2" type="primary" size="default" @click="update(1)">更新</Button>
          <Checkbox class="check-content" v-model="reset_old">重置前清空旧模板（推荐）</Checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoSetting, saveInfoSetting } from "api/setting";
export default {
  data() {
    return {
      updateLoading1: false,
      updateLoading2: false,
      reset_old: true,
      config: {
        app_id: "",
        config_mall_id: "",
        notice_wechat_template_miniprogram: "",
        notice_wechat_template_order_payment_shop: "",
        wechat_id: ""
      },
      // 中英文对照表
      translateDict: {
        SERVICE_EXPIRE: "服务即将过期提醒模板ID",
        LOTTERY_RUN_NOTIFY: "H5抽奖开奖通知",
        LOTTERY_GET_CODE_NOTIFY: "H5抽奖邀请成功通知"
      }
    };
  },
  methods: {
    update(type) {
      var parm = {};
      if (type == 0) {
        // 公众号模板消息
        parm = {};
        parm.template = {};
        parm.template.wechatTemplate = this.config.notice_wechat_template_order_payment_shop;
        for (var i = 0; i < this.wechatTemplateArr.length; i++) {
          parm.template[
            this.wechatTemplateArr[i].title
          ] = this.wechatTemplateArr[i].value;
        }
        this.updateLoading1 = true;
      } else {
        // 小程序模板消息
        parm = { is_init: this.reset_old };
        this.updateLoading2 = true;
      }
      saveInfoSetting(type, parm)
        .then(_res => {
          this.updateLoading1 = false;
          this.updateLoading2 = false;
          this.$Message.success("保存成功");
          if (type == 1) {
            // 小程序模板消息
            this.config.notice_wechat_template_miniprogram = JSON.stringify(
              _res.data.data.add.data
            );
          }
        })
        .catch(err => {
          this.updateLoading1 = false;
          this.updateLoading2 = false;
          this.$Message.error(err.message);
        });
    }
  },
  created() {
    getInfoSetting()
      .then(_res => {
        let templateData = JSON.parse(_res.data.config.notice_wechat_template);
        if (!templateData.LOTTERY_RUN_NOTIFY) {
          templateData.LOTTERY_RUN_NOTIFY = "";
        }

        if (!templateData.LOTTERY_GET_CODE_NOTIFY) {
          templateData.LOTTERY_GET_CODE_NOTIFY = "";
        }
        _res.data.config.notice_wechat_template = JSON.stringify(templateData);
        this.spinShow = false;
        this.config = _res.data.config;
      })
      .catch(err => {
        this.spinShow = false;
        this.$Message.error(err.message);
      });
  },
  computed: {
    wechatTemplateArr: function() {
      var arr = [];
      if (this.config.notice_wechat_template) {
        var infoDict = JSON.parse(this.config.notice_wechat_template);
        var keys = Object.keys(infoDict);
        for (var i = 0; i < keys.length; i++) {
          var key = keys[i];
          var value = infoDict[key];
          var dict = {};
          dict.title = key;
          dict.value = value;
          arr.push(dict);
        }
      }
      return arr;
    },
    miniprogramTemplate: function() {
      var templateString = "";
      if (this.config.notice_wechat_template_miniprogram) {
        var arr = JSON.parse(this.config.notice_wechat_template_miniprogram);
        for (var i = 0; i < arr.length; i++) {
          templateString += arr[i];
          if (i < arr.length - 1) {
            templateString += ";";
          }
        }
      }

      return templateString;
    }
  },
  components: {}
};
</script>

<style scoped>
.info-wrapper {
  margin: 24px 24px 0 24px;
  height: calc(100vh - 90px);
}
.info-pannel {
  background: white;
  /* padding: 12px; */
  padding-bottom: 0;
  border-bottom: 0;
}
.info-pannel-wrapper {
  border: 1px solid #dcdfe6;
  padding-bottom: 20px;
  margin-bottom: 12px;
}
.info-pannel-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 20px;
  border-bottom: 1px solid #dcdfe6;
}
.input-wrapper {
  padding: 10px 20px;
}
.input-wrapper p {
  margin-left: 20px;
  font-size: 13px;
}
.input-wrapper.top {
  padding-top: 20px;
}
.info-pannel-text {
  width: 160px;
  font-size: 14px;
  margin-right: 20px;
  text-align: left;
}
.input-content {
  align-items: flex-start;
}
.alpha {
  opacity: 0;
}
.check-content {
  margin-left: 20px;
}
</style>